<template>
        <el-dialog title="收货地址" :visible="dialogFormVisible"
                   @update:visible="setDialogFormVisible(false)"
                   width="50%">
            <el-form :model="address">
                <el-form-item label="选择地区" required>
                    <el-col :span="5">
                        <el-form-item label="省" label-width="30px" disabled="disableds">
                            <el-input v-model="address.addressProvince" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-form-item label="市" label-width="30px" disabled="disableds">
                            <el-input v-model="address.addressCity" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-form-item label="区" label-width="30px" disabled="disableds">
                            <el-input v-model="address.addressDistrict" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="8">
                        <el-form-item label="街道" label-width="50px" disabled="disableds">
                            <el-input v-model="address.addressStreet" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="具体地址" label-width="90px" disabled="disableds">
                    <el-input v-model="address.addressDetail" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="收货人" label-width="90px" disabled="disableds">
                    <el-input v-model="address.addressConsignee" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="收货人电话" label-width="90px" disabled="disableds">
                    <el-input v-model="address.addressPhone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-row>
                <el-link @click="setAddressIsDefault()">设置默认</el-link>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="update()">确 定</el-button>
                <el-button type="primary" @click="setDisableds(false)">修 改</el-button>
                <el-button type="primary" @click="setDialogFormVisible(false),setDisableds(false)">取 消</el-button>
            </div>
        </el-dialog>
</template>

<script>
    import {updateAddressIsDefault,updateAddress} from "../../service/address";
    import {mapState,mapMutations,mapActions} from "vuex"
    export default {
        computed:{
            ...mapState("address",["dialogFormVisible","disableds","address","dialogFormVisible"]),
            ...mapState("user",["user"])
        },
        data(){
          return {
              addressFrom: {
                  addressProvince:'',
                  addressCity:'',
                  addressDistrict:'',
                  addressStreet:'',
                  addressDetail:'',
                  addressConsignee:'',
                  addressPhone:''
              },
          }
        },
        methods:{
            async update(){
                await updateAddress(this.address);
                this.setDialogFormVisible(false),
                this.setDisableds(false)
            },
            async setAddressIsDefault(){
                await updateAddressIsDefault(this.user.userId,this.address.addressId);
            },
            ...mapMutations("address",["setDialogFormVisible","setDisableds"]),
            ...mapActions("address",["findById"])
        }
    };
</script>

<style scoped>

</style>